<!DOCTYPE html>
<html lang="en">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  <link rel="icon" href="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
  <title>VueUse 插件方法合集 | 小崔的博客</title>
  <meta name="author" content="cuishikang" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Vue3" />
  
  <meta name="description" content="::: tip 介绍VueUse插件一些实用的方法合集:::">
<meta property="og:type" content="article">
<meta property="og:title" content="VueUse 插件方法合集">
<meta property="og:url" content="https://cuishikang.gitee.io/2021/07/15/Vue3/9_VueUse/index.html">
<meta property="og:site_name" content="小崔的博客">
<meta property="og:description" content="::: tip 介绍VueUse插件一些实用的方法合集:::">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta property="article:published_time" content="2021-07-14T16:00:00.000Z">
<meta property="article:modified_time" content="2022-02-19T10:22:58.544Z">
<meta property="article:author" content="cuishikang">
<meta property="article:tag" content="Vue3">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/cuishikang/tmp/raw/master/img/boke.png">
<meta name="twitter:site" content="@null">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
  
    <link rel="stylesheet" id="highlight-css" href="/css/highlight/night-eighties.min.css" type="text/css" media="all">
  
  
  <link rel="stylesheet" id="fontawe-css" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
  <link rel="stylesheet" id="nprogress-css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" type="text/css" media="all">
  
  
    <link rel="stylesheet" href="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.css">
  
  
    <link rel="stylesheet" href="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
  
  
    <link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="https://unpkg.com/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
      .kratos-cover.kratos-cover-2 {
        background-image: url('/images/banner.webp');
      }
    
    
      @media(min-width:768px) {
        body.custom-background {
          background-image: url('/images/bg.webp');
        }
      }
    
  </style>
  
<meta name="generator" content="Hexo 6.0.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                        <li><a href="/"><i class="fa fa-home"></i>首页</a></li>
                                    
                                
                                    
                                        <li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                    
                                
                                    
                                        <li><a href="/friends/"><i class="fa fa-paw"></i>好伙伴</a></li>
                                    
                                
                                    
                                        <li>
                                            <a><i class="fa fa-link"></i>关于本人</a>
                                            <ul class="sub-menu">
                                                
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang"><i class="fa fa-git"></i>码云</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://gitee.com/cuishikang/tmp/raw/master/img/2201645358312_.pic.jpg"><i class="fa fa-weixin"></i>微信</a></li>
                                                    
                                                
                                                    
                                                        <li><a target="_blank" rel="noopener" href="https://www.zhihu.com/people/fu-xi-ting-67-17-5"><i class="fa  fa-search"></i>知乎</a></li>
                                                    
                                                
                                                    
                                                        <li><a href="http://cuishikang.gitee.io/my_resume/#/"><i class="fa  fa-file-o"></i>简历</a></li>
                                                    
                                                
                                            </ul>
                                        </li>
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/">小崔的博客</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/">
                        <h2>小崔的博客</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article>
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center">VueUse 插件方法合集</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><i class="fa fa-calendar"></i> 2021-07-15</li>
                <li><i class="fa fa-user"></i> 作者 cuishikang</li>
                <li>
                    <i class="fa fa-edit"></i> 
                    
                    
                        ~10.44K
                    
                    字
                </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                本文最后编辑于 <time datetime="1645266178544"></time> 前，其中的内容可能需要更新。
            </div>
            
            <hr />
            <p>::: tip 介绍<br>VueUse插件一些实用的方法合集<br><br>:::</p>
<span id="more"></span>

<h2 id="VueUse介绍和安装"><a href="#VueUse介绍和安装" class="headerlink" title="VueUse介绍和安装"></a>VueUse介绍和安装</h2><ul>
<li><a target="_blank" rel="noopener" href="https://vueuse.org/core/useWindowScroll/">VueUse官网</a> 是Vue扩展方法插件 将一些原生api方法转换为简单的Vue方法</li>
<li><font color = #ff3040>注意: </font>Vue3中导入Vue Use需要按需导入 用哪个方法导入那个</li>
</ul>
<blockquote>
<p>VueUse 导入方法</p>
</blockquote>
<p>(1) 安装@vueuse&#x2F;core 包，它封装了常见的一些交互逻辑</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i @vueuse/core</span><br></pre></td></tr></table></figure>

<p>(2) 按需导入VueUse里面方法 (例子导入监测窗口滚动方法)</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> &#123; useWindowScroll &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;AppHeaderSticky&#x27;</span>,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    <span class="comment">// 使用 VueUse 提供的窗口滚动方法 获取窗口滚动监测的数据</span></span><br><span class="line">    <span class="keyword">const</span> &#123; y &#125; = <span class="title function_">useWindowScroll</span>()</span><br><span class="line">    <span class="keyword">return</span> &#123; y &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="监测窗口滚动方法-useWindowScroll"><a href="#监测窗口滚动方法-useWindowScroll" class="headerlink" title="监测窗口滚动方法 useWindowScroll"></a>监测窗口滚动方法 <code>useWindowScroll</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/useWindowScroll/">监测窗口滚动方法</a> </p>
<ul>
<li>获取窗口滚动的数据 常用于吸顶判断</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useWindowScroll &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;AppHeaderSticky&#x27;</span>,</span><br><span class="line">  setup () &#123;</span><br><span class="line">    <span class="comment">// 使用 VueUse 提供的窗口滚动方法 获取窗口滚动监测的数据</span></span><br><span class="line">    <span class="keyword">const</span> &#123; y &#125; = <span class="title function_">useWindowScroll</span>()</span><br><span class="line">    <span class="keyword">return</span> &#123; y &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> <a target="_blank" rel="noopener" href="https://liukaili.vercel.app/blogs/docs/Vue3/8_Vue_xi_ding.html">吸顶效果样式 使用了该方法</a></p>
<h2 id="检测组件是否可视化-useIntersectionObserver"><a href="#检测组件是否可视化-useIntersectionObserver" class="headerlink" title="检测组件是否可视化 useIntersectionObserver"></a>检测组件是否可视化 <code>useIntersectionObserver</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/useintersectionobserver/#useintersectionobserver">检测组件是否可视化</a></p>
<ul>
<li>通常用来设置组件懒加载 </li>
<li>通过返回值 <code>stop</code>来取消监听</li>
<li>具有两个返回参数 (方法参数)<ul>
<li>参数1是监听的Dom元素(需要的观察容器)</li>
<li>参数2是判断 是否到达可视区 如果到达返回 true (默认是false)</li>
</ul>
</li>
<li>在方法结尾设置 <code>threshold=0</code> 刚一进入可视区就触发(默认有一段距离才触发)</li>
</ul>
<blockquote>
<p>组件懒加载案例</p>
</blockquote>
<p><code>目的</code>：实现当组件进入可视区域在加载数据。</p>
<ul>
<li>我们可以使用 <code>@vueuse/core</code> 中的 <code>useIntersectionObserver</code> 来实现监听进入可视区域行为，但是必须配合vue3.0的组合API的方式才能实现。</li>
<li>适用于图片较少的 大组件 组件整体的懒加载</li>
</ul>
<blockquote>
<p> 大致步骤：</p>
</blockquote>
<ul>
<li>封装一个组件懒加载<ul>
<li>通过<code>useIntersectionObserver</code> 来实现监听进入可视区域行为 判断是否到达可视区 </li>
<li>返回两个参数 (方法参数)<ul>
<li>参数1是监听的Dom元素(需要的观察容器)</li>
<li>参数2是判断 是否到达可视区 如果到达返回 true (默认是false)</li>
</ul>
</li>
<li>可以设置返回值 <code>stop</code>停止监控</li>
</ul>
</li>
<li>Vue组件中 导入懒加载组件方法<ul>
<li>需要给组件懒加载传递api接口 </li>
<li>并且接收懒加载组件返回的 参数 <ul>
<li>监听的Dom元素 通过<code>ref</code>绑定到需要监听的组件</li>
<li>返回的展示数据 遍历到页面上</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>懒加载组件设置使用</p>
</blockquote>
<ol>
<li>设置一个懒加载组件(js文件)<ul>
<li>通过<code>useIntersectionObserver</code> 来实现监听进入可视区域行为 判断是否到达可视区 </li>
<li>返回两个参数 (方法参数)<ul>
<li>参数1是监听的Dom元素(需要的观察容器)</li>
<li>参数2是调用接口api返回的数据 (展示数据)</li>
</ul>
</li>
</ul>
</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数据展示的懒加载 需要配合图片懒加载</span></span><br><span class="line"><span class="comment">// 导入VueUse组件useIntersectionObserver方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; useIntersectionObserver &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="comment">// 导入Vue3的ref方法</span></span><br><span class="line"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// useIntersectionObserver 有三个参数</span></span><br><span class="line"><span class="comment">// 参数1 表示被监听的Dom元素(观察容器)</span></span><br><span class="line"><span class="comment">// 参数2 监听是否到达绑定的Dom组件(布尔值类型)</span></span><br><span class="line"><span class="comment">// 参数3 是一个对象用来配置这个方法(通常用来配置触发条件)</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> (apiFn) =&gt; &#123; <span class="comment">// 参数apiFn表示调用接口的方法(组件传来的api接口 用来获取展示数据)</span></span><br><span class="line">  <span class="comment">// 接收传来的懒加载数据(展示数据)</span></span><br><span class="line">  <span class="keyword">const</span> result = <span class="title function_">ref</span>([])</span><br><span class="line">  <span class="comment">// 设置VueUse懒加载的监听的Dom元素(观察容器)</span></span><br><span class="line">  <span class="keyword">const</span> target = <span class="title function_">ref</span>(<span class="literal">null</span>)</span><br><span class="line">  <span class="comment">// 启动通过VueUse的懒加载操作</span></span><br><span class="line">  <span class="keyword">const</span> &#123; stop &#125; = <span class="title function_">useIntersectionObserver</span>(target, <span class="function">(<span class="params">[&#123; isIntersecting &#125;]</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// stop是取消监听 target表示被监听的Dom元素(观察容器) isIntersecting是监听是否到达绑定的Dom组件(布尔值类型)</span></span><br><span class="line">    <span class="keyword">if</span> (isIntersecting) &#123; <span class="comment">// 如果到达了Dom组件可视区 调用接口 获取展示数据</span></span><br><span class="line">    <span class="comment">// 触发一次之后，取消继续监听</span></span><br><span class="line">      <span class="title function_">stop</span>()</span><br><span class="line">      <span class="comment">// 被监听的Dom组件已经进入可视区，此时组件传来的api接口</span></span><br><span class="line">      <span class="title function_">apiFn</span>().<span class="title function_">then</span>(<span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 储存到展示数据中</span></span><br><span class="line">        result.<span class="property">value</span> = data.<span class="property">result</span></span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, &#123;</span><br><span class="line">    <span class="comment">// 刚一进入可视区，就触发（默认值表示，进入一段距离之后才触发）</span></span><br><span class="line">    <span class="attr">threshold</span>: <span class="number">0</span> <span class="comment">// 0-1范围 类似百分比(推荐设置为0 无延迟)</span></span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="comment">// 进行返回值</span></span><br><span class="line">  <span class="comment">// 1、target表示被监听的Dom元素(需要的观察容器)</span></span><br><span class="line">  <span class="comment">// 2、result表示调用接口api返回的数据 (展示数据)</span></span><br><span class="line">  <span class="keyword">return</span> &#123; target, result &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Vue组件中 导入懒加载组件方法<ul>
<li>需要给组件懒加载传递api接口 </li>
<li>并且接收懒加载组件返回的 参数 <ul>
<li>监听的Dom元素 通过<code>ref</code>绑定到需要监听的组件</li>
<li>返回的展示数据 遍历到页面上</li>
</ul>
</li>
<li>如果api接口需要传参 需要用箭头函数进行设置 <code>const &#123; target, result &#125; = useLazyData(() =&gt; findBrand(10))</code></li>
</ul>
</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;home-product&quot; ref=&#x27;target&#x27;&gt;</span><br><span class="line">  &lt;!-- 需要懒加载的组件内容  --&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">// 导入api接口</span><br><span class="line">import &#123; findGoods &#125; from &#x27;@/api/home.js&#x27;</span><br><span class="line">import useLazyData from &#x27;@/hooks&#x27;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &#x27;HomeProduct&#x27;,</span><br><span class="line">  components: &#123; HomePanel, HomeGoods &#125;,</span><br><span class="line">  setup () &#123;</span><br><span class="line">     // 把api接口传给组件懒加载 并且获取组件懒加载的数据 </span><br><span class="line">    // 获取懒加载组件返回的两个值</span><br><span class="line">    // 1、target表示被监听的Dom元素(需要的观察容器)</span><br><span class="line">    // 2、result表示调用接口apiFn返回的数据 (展示数据)</span><br><span class="line">    // 3、需要在懒加载组件传递api接口 用来获取展示数据</span><br><span class="line">    const &#123; target, result &#125; = useLazyData(findGoods) // 无需传参的设置</span><br><span class="line">    // 组件懒加载需要传递参数 先通过函数方法调用接口获取promise数据 到达指容器位置后 再传递服务器获取的数据</span><br><span class="line">    // const &#123; target, result &#125; = useLazyData(() =&gt; findBrand(10)) // 需要传参的设置</span><br><span class="line">    return &#123; target, list: result &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>总结：监听DOM元素进入可视区，进入后停止监听，并且调用接口获取数据</p>
<p><a target="_blank" rel="noopener" href="https://liukaili.vercel.app/blogs/docs/Vue3/8_Vue_xi_ding.html">组件懒加载 使用了该方法</a></p>
<h2 id="监控鼠标移动-useMouseInElement"><a href="#监控鼠标移动-useMouseInElement" class="headerlink" title="监控鼠标移动 useMouseInElement"></a>监控鼠标移动 <code>useMouseInElement</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/usemouseinelement/#usemouseinelement">监控鼠标移动</a></p>
<ul>
<li>适用于监控数据在某个容器内的移动参数 并且可以判断是否移出移入</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://liukaili.vercel.app/blogs/docs/Vue3/5_tu_pian_lazy.html">图片预览放大镜组件 使用了该方法</a></p>
<h2 id="父子组件相互传值-useVModel"><a href="#父子组件相互传值-useVModel" class="headerlink" title="父子组件相互传值 useVModel"></a>父子组件相互传值 <code>useVModel</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/usevmodel/#usevmodel">父子组件相互传值</a></p>
<ul>
<li>适用基于<code>v-model</code> 父子组件之间进行的传值操作</li>
<li>VueUse修改父组件的值 需要<code>.value</code>来修改数据 不过在<code>template</code><strong>模板中不需要</strong></li>
</ul>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">setup (props, &#123; emit &#125;) &#123; <span class="comment">// 结构赋值 获取父组件传值方法 emit</span></span><br><span class="line">  <span class="comment">// 使用VueUse的useVModel进行父组自检相互传值</span></span><br><span class="line">  <span class="comment">// 获取父组件传递过来的modelValue的值</span></span><br><span class="line">  <span class="keyword">const</span> checked = <span class="title function_">useVModel</span>(props, <span class="string">&#x27;modelValue&#x27;</span>, emit)</span><br><span class="line">  <span class="keyword">return</span> &#123; checked &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://liukaili.vercel.app/blogs/docs/Vue3/2.2_button.html#%E5%8A%9F%E8%83%BD%E6%80%A7%E5%88%87%E6%8D%A2%E6%8C%89%E9%92%AE%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0-%E9%9D%9E%E6%8F%92%E4%BB%B6">功能性切换按钮效果实现 使用了该方法</a></p>
<h2 id="全屏展示内容方法-useFullscreen"><a href="#全屏展示内容方法-useFullscreen" class="headerlink" title="全屏展示内容方法 useFullscreen"></a>全屏展示内容方法 <code>useFullscreen</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/useFullscreen/#usefullscreen">全屏展示内容方法</a></p>
<ul>
<li>通常用于把视频 图片 等全屏展示</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useFullscreen &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="comment">//isFullscreen 当前是否是全屏</span></span><br><span class="line"><span class="comment">//toggle  是函数直接调用即可</span></span><br><span class="line"><span class="keyword">const</span> &#123; isFullscreen, toggle &#125; = <span class="title function_">useFullscreen</span>();</span><br></pre></td></tr></table></figure>

<h2 id="粘贴内容功能方法-useClipboard"><a href="#粘贴内容功能方法-useClipboard" class="headerlink" title="粘贴内容功能方法  useClipboard"></a>粘贴内容功能方法 <code> useClipboard</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/useclipboard/#useclipboard">粘贴内容功能</a></p>
<ul>
<li>可以将一些数据 点击按钮粘贴到剪切板上 方便用户复制</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useClipboard &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="comment">//text 粘贴的内容</span></span><br><span class="line"><span class="comment">//copy 是粘贴函数</span></span><br><span class="line"><span class="keyword">const</span> &#123; text, copy, isSupported &#125; </span><br><span class="line">= <span class="title function_">useClipboard</span>(&#123; <span class="attr">copiedDuring</span>: <span class="number">1500</span> &#125;);</span><br></pre></td></tr></table></figure>

<h2 id="夜间模式功能方法-useDark"><a href="#夜间模式功能方法-useDark" class="headerlink" title="夜间模式功能方法 useDark"></a>夜间模式功能方法 <code>useDark</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/useDark/#usedark">夜间模式功能方法</a></p>
<ul>
<li>可以设置一个按钮 点击后 把页面切换成黑夜模式(页面整体变黑)</li>
</ul>
<blockquote>
<p>这个需要自定义样式类通过 toggleDark函数控制</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useDark, useToggle &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="keyword">const</span> isDark = <span class="title function_">useDark</span>(&#123;</span><br><span class="line">  <span class="attr">selector</span>: <span class="string">&quot;body&quot;</span>,<span class="comment">//class渲染的标签</span></span><br><span class="line"></span><br><span class="line">  <span class="attr">valueDark</span>: <span class="string">&quot;dark&quot;</span>,<span class="comment">//暗黑class名字</span></span><br><span class="line">  <span class="attr">valueLight</span>: <span class="string">&quot;light&quot;</span><span class="comment">//高亮class名字</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">const</span> toggleDark = <span class="title function_">useToggle</span>(isDark);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="输入框的数据绑定到标题-useTitle"><a href="#输入框的数据绑定到标题-useTitle" class="headerlink" title="输入框的数据绑定到标题 useTitle"></a>输入框的数据绑定到标题 <code>useTitle</code></h2><p><img src="https://i.loli.net/2021/07/20/6Yckj1DZur2MBfO.png" alt="image-20210720204411440"></p>
<p><a target="_blank" rel="noopener" href="https://vueuse.org/core/usetitle/#usetitle">输入框中模拟标题数据</a></p>
<ul>
<li>输入框的数据绑定到标题 输什么 标题也显示什么</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; useTitle &#125; <span class="keyword">from</span> <span class="string">&#x27;@vueuse/core&#x27;</span></span><br><span class="line"><span class="keyword">const</span> title = <span class="title function_">useTitle</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(title.<span class="property">value</span>) <span class="comment">// print current title</span></span><br><span class="line">title.<span class="property">value</span> = <span class="string">&#x27;Hello&#x27;</span> <span class="comment">// change current title</span></span><br></pre></td></tr></table></figure>

<h2 id="设置Url内容-useUrlSearchParams"><a href="#设置Url内容-useUrlSearchParams" class="headerlink" title="设置Url内容 useUrlSearchParams"></a>设置Url内容 <code>useUrlSearchParams</code></h2><p><a target="_blank" rel="noopener" href="https://vueuse.org/core/useUrlSearchParams/?foo=bar&vueuse=awesome#useurlsearchparams">设置Url内容</a></p>
<ul>
<li>暂时不知道有啥用</li>
</ul>
<h2 id="以上方法-综合使用案例-Vue2"><a href="#以上方法-综合使用案例-Vue2" class="headerlink" title="以上方法 综合使用案例 (Vue2)"></a>以上方法 综合使用案例 (Vue2)</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;VueUse工具插件&lt;/h1&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;input type=&quot;text&quot; /&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;h5 @click=&quot;toggle&quot;&gt;useFullscreen全屏展示&lt;/h5&gt;</span><br><span class="line">    &lt;h5&gt;useActiveElement()当前点击的元素&lt;/h5&gt;</span><br><span class="line">    &lt;h5&gt;useBreakpoints选择当前窗口范围&lt;/h5&gt;</span><br><span class="line">    &lt;h5&gt;useBrowserLocation浏览器URL信息&lt;/h5&gt;</span><br><span class="line"></span><br><span class="line">    &lt;note&gt;useClipboard 粘贴功能&lt;/note&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">      当前粘贴内容:</span><br><span class="line">      &lt;code&gt;&#123;&#123; text || &#x27;none&#x27; &#125;&#125;&lt;/code&gt;</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">    &lt;input v-model=&quot;input&quot; type=&quot;text&quot; /&gt;</span><br><span class="line">    &lt;button @click=&quot;copy(input)&quot;&gt;Copy&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">    &lt;div v-if=&quot;!isSupported&quot;&gt;你的浏览器不支持当前api&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h5&gt;useCssVar控制css变量&lt;/h5&gt;</span><br><span class="line">      &lt;div ref=&quot;el&quot; style=&quot;color: var(--color)&quot;&gt;颜色值, &#123;&#123; color &#125;&#125;&lt;/div&gt;</span><br><span class="line">      &lt;button @click=&quot;switchColor&quot;&gt;改变颜色&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h3&gt;开启useDark 黑暗模式&lt;/h3&gt;</span><br><span class="line">      &lt;button @click=&quot;toggleDark&quot;&gt;开启暗黑模式&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line"></span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;useEventListener 页面卸载自动卸载监听&lt;/h4&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;</span><br><span class="line">        useFavicon网站图标更换 一般跟 usePreferredDark当前页面是否是暗黑主题</span><br><span class="line">        还有useDark 一起使用</span><br><span class="line">      &lt;/h4&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;useFetch一款http请求插件，感觉axios的功能都有反正没什么区别感觉可能比axios方便&lt;/h4&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;useMediaControls媒体控制器提供了自定义媒体组件的基本元素&lt;/h4&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;useMediaQuery媒体查询跟原生html类似&lt;/h4&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;usePermission&lt;/h4&gt;</span><br><span class="line">      &lt;h5&gt;</span><br><span class="line">        未来提高用户体验截止到2021年5月当前api还在实验阶段无法使用,</span><br><span class="line">        &lt;a</span><br><span class="line">          href=&quot;https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API&quot;</span><br><span class="line">        &gt;MDN Web api介绍&lt;/a&gt;</span><br><span class="line">      &lt;/h5&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;usePreferredColorScheme&lt;/h4&gt;</span><br><span class="line">      &lt;h5&gt;查询当前配色方案 跟,useDark相关函数配合使用&lt;/h5&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;usePreferredDark&lt;/h4&gt;</span><br><span class="line">      &lt;h5&gt;当前页面是否是暗黑主题&lt;/h5&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;useShare &lt;/h4&gt;</span><br><span class="line">      &lt;h5 @click=&quot;startShare&quot;&gt;点击分享谷歌支持其他平台估计不支持&lt;/h5&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">       &lt;div&gt;</span><br><span class="line">      &lt;h4&gt;useTitle &lt;/h4&gt;</span><br><span class="line">      &lt;h5 &gt;设置浏览器标题&lt;/h5&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">      &lt;h4&gt; useUrlSearchParams &lt;/h4&gt;</span><br><span class="line">      &lt;h5 &gt;设置浏览器Url参数&lt;/h5&gt;</span><br><span class="line">       &lt;ul&gt;</span><br><span class="line">    &lt;li v-for=&#x27;key in Object.keys(params)&#x27; :key=&quot;key&quot;&gt;</span><br><span class="line">      &#123;&#123; key &#125;&#125;=&#123;&#123; params[key] &#125;&#125;</span><br><span class="line">    &lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">      </span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script setup&gt;</span><br><span class="line">import &#123; reactive, watch, ref &#125; from &quot;vue&quot;;</span><br><span class="line">import &#123;</span><br><span class="line">  useFullscreen,</span><br><span class="line">  useActiveElement,</span><br><span class="line">  useBreakpoints,</span><br><span class="line">  useBrowserLocation,</span><br><span class="line">  useClipboard,</span><br><span class="line">  usePermission,</span><br><span class="line">  useCssVar,</span><br><span class="line">  useDark,</span><br><span class="line">  useToggle,</span><br><span class="line">  useScriptTag ,</span><br><span class="line">  useShare,</span><br><span class="line">  useTitle,</span><br><span class="line">  useUrlSearchParams </span><br><span class="line">&#125; from &quot;@vueuse/core&quot;;</span><br><span class="line">const title = useTitle()</span><br><span class="line">console.log(title.value) // print current title</span><br><span class="line">title.value = &#x27;Hello&#x27; // change current title</span><br><span class="line">const &#123; share &#125; = useShare();</span><br><span class="line">function startShare() &#123;</span><br><span class="line">  share(&#123;</span><br><span class="line">    title: &#x27;Hello&#x27;,</span><br><span class="line">    text: &#x27;Hello my friend!&#x27;,</span><br><span class="line">    url: location.href,</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;;</span><br><span class="line">    const params = useUrlSearchParams(&#x27;history&#x27;)</span><br><span class="line">    params.foo = &#x27;bar&#x27;;</span><br><span class="line">    params.vueuse = &#x27;awesome&#x27;;</span><br><span class="line">const microphoneAccess = usePermission(&quot;microphone&quot;);</span><br><span class="line">const breakpoints = useBreakpoints(&#123;</span><br><span class="line">  tablet: 640,</span><br><span class="line">  laptop: 1024,</span><br><span class="line">  desktop: 1280</span><br><span class="line">&#125;);</span><br><span class="line">const isDark = useDark(&#123;</span><br><span class="line">  selector: &quot;body&quot;,</span><br><span class="line"></span><br><span class="line">  valueDark: &quot;dark&quot;,</span><br><span class="line">  valueLight: &quot;light&quot;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">const toggleDark = useToggle(isDark);</span><br><span class="line">let input = &quot;&quot;;</span><br><span class="line">let el = null;</span><br><span class="line">const color = useCssVar(&quot;--color&quot;, el);</span><br><span class="line">const switchColor = (color) =&gt; &#123;</span><br><span class="line">   color.value =color</span><br><span class="line">&#125;;</span><br><span class="line">const laptop = breakpoints.between(&quot;tablet&quot;, &quot;desktop&quot;);</span><br><span class="line">const location = useBrowserLocation();</span><br><span class="line">const &#123; isFullscreen, toggle &#125; = useFullscreen();</span><br><span class="line">const activeElement = useActiveElement(); //当前点击的元素</span><br><span class="line">const &#123; text, copy, isSupported &#125; = useClipboard(&#123; copiedDuring: 1500 &#125;);</span><br><span class="line">watch(isDark, el =&gt; &#123;</span><br><span class="line">  console.log(&quot;是否是含黑模式&quot;, el);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">watch(activeElement, el =&gt; &#123;</span><br><span class="line">  console.log(&quot;focus changed to&quot;, el);</span><br><span class="line">&#125;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>


        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5>本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://cuishikang.gitee.io/2021/07/15/Vue3/9_VueUse/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://cuishikang.gitee.io/2021/07/15/Vue3/9_VueUse/";
            const title         = "「VueUse 插件方法合集」";
            const excerpt       = `::: tip 介绍VueUse插件一些实用的方法合集:::`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/tags/Vue3/" rel="tag">Vue3</a>
                </div>
                <div class="pull-date">
                <span>最后编辑：2022-02-19</span>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" JS的es6 es7 新特性" href="/2021/07/13/JavaScript/2_es6_es7/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" Vue3 吸顶效果实现组件" href="/2021/07/17/Vue_style/8_Vue_xi_ding/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="https://gitee.com/cuishikang/tmp/raw/master/img/20220220194141.png" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                91
            </span>
        </a>
        <a class="meta-item" href="/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                13
            </span>
        </a>
        <a class="meta-item" href="/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                33
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Css/">Css</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a><span class="category-list-count">15</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/RABC/">RABC</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vscode/">Vscode</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue3/">Vue3</a><span class="category-list-count">25</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue%E7%A7%BB%E5%8A%A8%E5%A4%B4%E6%9D%A1%E9%A1%B9%E7%9B%AE/">Vue移动头条项目</a><span class="category-list-count">10</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/animation/">animation</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/axios/">axios</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/other/">other</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/uniapp/">uniapp</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/vue-element-admin/">vue-element-admin</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/tags/Css/" style="font-size: 0.66em;">Css</a> <a href="/tags/H5Video/" style="font-size: 0.6em;">H5Video</a> <a href="/tags/JavaScript/" style="font-size: 0.74em;">JavaScript</a> <a href="/tags/My-project/" style="font-size: 0.6em;">My project</a> <a href="/tags/QQ/" style="font-size: 0.6em;">QQ</a> <a href="/tags/RABC/" style="font-size: 0.6em;">RABC</a> <a href="/tags/Vant/" style="font-size: 0.71em;">Vant</a> <a href="/tags/VeeValidate/" style="font-size: 0.6em;">VeeValidate</a> <a href="/tags/Vscode/" style="font-size: 0.6em;">Vscode</a> <a href="/tags/Vue/" style="font-size: 0.8em;">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 0.6em;">Vue Router</a> <a href="/tags/Vue3/" style="font-size: 0.77em;">Vue3</a> <a href="/tags/Vuex/" style="font-size: 0.6em;">Vuex</a> <a href="/tags/Vue%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 0.74em;">Vue移动端</a> <a href="/tags/Windows/" style="font-size: 0.6em;">Windows</a> <a href="/tags/animation/" style="font-size: 0.63em;">animation</a> <a href="/tags/axios/" style="font-size: 0.69em;">axios</a> <a href="/tags/echarts/" style="font-size: 0.6em;">echarts</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/2111/02/19/JavaScript/5_algorithm_tree/"><i class="fa  fa-book"></i> JavaScript树形数据转换算法</a>
            
          
        
          
          
            <a class="list-group-item" href="/2099/01/27/Vue3/1.1.1_Vue_study/"><i class="fa  fa-book"></i> Vue3 学习手册(博客版)</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/28/JavaScript/0.2_scroll/"><i class="fa  fa-book"></i> JS 滚动到指定位置和回到顶部</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/23/Vue/5_Vue_nextTick/"><i class="fa  fa-book"></i> 理解$nextTick</a>
            
          
        
          
          
            <a class="list-group-item" href="/2022/02/20/hello-world/"><i class="fa  fa-book"></i> Hello World</a>
            
          
        
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        
                        
                        <li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
                        
                        
                        
                        <li><a target="_blank" rel="me" href="https://nya.one/@Candinya"><i class="fa fa fa-share-alt-square"></i></a></li>
                        <li><a target="_blank" rel="nofollow" href="https://github.com/Candinya"><i class="fa fa-github"></i></a></li>
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2022 小崔的博客 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by cuishikang.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="https://unpkg.com/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/";
</script>


    <script async src="/js/candy.min.js"></script>



    <script defer src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="song"
        id="1375305989"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="https://unpkg.com/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>


    <script defer src="/js/kr-dark.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>